import {createApp, reactive, computed} from "../../../../../js/vue.esm-browser.js";

const app = createApp({
    setup() {
        let books = reactive(
            [
                {
                    id: 1,
                    name: "Java 编程艺术",
                    press: "清华大学出版社",
                    date: "2023-10-15",
                    price: 168.99,
                    count: 3,
                },
                {
                    id: 2,
                    name: "JavaScript 设计与实现",
                    press: "人民邮电出版社",
                    date: "2022-05-23",
                    price: 82.60,
                    count: 1,
                },
                {
                    id: 3,
                    name: "Vue 权威指南",
                    press: "机械工业出版社",
                    date: "2023-9-18",
                    price: 72.99,
                    count: 2,
                },
                {
                    id: 4,
                    name: "Android 开发从入门到精通",
                    press: "电子工业出版社",
                    date: "2021-10-13",
                    price: 46.89,
                    count: 1,
                },
                {
                    id: 5,
                    name: "JavaScript 权威指南",
                    press: "清华大学出版社",
                    date: "2021-12-20",
                    price: 198.99,
                    count: 2,
                },
            ]
        )


        function decrease(index) {
            // console.log(index);
            books[index].count--
        }

        function increase(index) {
            books[index].count++
        }

        function deleteItem(index) {
            books.splice(index, 1)
        }

        let totalPrice = computed(
            function () {
                let total = 0
                for (let i = 0; i < books.length; i++) {
                    total += books[i].price * books[i].count
                }

                return total.toFixed(2)
            }
        )

        return {
            books,
            decrease,
            increase,
            deleteItem,
            totalPrice,
        }
    }
})

app.mount("#app")